import { Button, Space, message,Form,Input,DatePicker } from 'antd'
import React, { useState, useEffect }from 'react'
import CustomTable from './components/CustomTable'
import CustomModal from './components/CustomModal'
import { getList,add, update,remove,getAll } from '../../api/health'
import XLSX from 'xlsx'

export default function Health() {

  // 利用 useState HOOK 定义组件使用到的 state 状态数据
  // customTable 的数据
  const [healthList, setHealthList] = useState([])
  const [page,setPage] = useState(1)
  const [pageSize, setPageSize] = useState(5)
  const [total, setTotal] = useState(0)
  // customModal 的数据
  const [modalVisible, setModalVisible] = useState(false)
  const [modalType, setModalType] = useState('create')  // 弹出的 信息栏是 创建（create） 还是 修改（update）
  const [updateData, setUpdateData] = useState({}) // 待修改的数据项

  // useEffect() 类似 钩子函数 componentDidMount()
  // 当依赖项（第二个参数）改变时，会自动调用这个函数
  useEffect(() => {
    getListByPage()
    // console.log('loaded...........')

    // const timer = setInterval(() => console.log(page),1000)

    // // componentWillUnmount()
    // // useEffect 中的 return 就相当于 钩子函数 componentDidUnmount()
    // return () => {
    //   console.log('destroy..........')
    //   clearInterval(timer)
    // }
  },[])

  // // componentDidUpdate()
  // // 给useEffect() 依赖项的时候，当依赖项改变时自动触发
  // // 就相当于 侯子涵数的 componentDidUpdate()
  // useEffect(() => {
  //   console.log('change:', healthList)
  // }, [healthList])

  // 分页查询列表数据
  async function getListByPage(_page = 1,_pageSize = 5) {
    try {
      const res = await getList({
        page:_page,
        pageSize:_pageSize
      })

      // 设置状态数据
      setHealthList(res.list)
      setPage(res.page)
      setPageSize(res.pageSize)
      setTotal(res.total)

    } catch (error) {
      console.log('异常：',error)
    }
  }

  // 页码改变，重新查询数据
  const handlePageChange = (_page, _pageSize) => {
    getListByPage(_page, _pageSize)
  }

  // 对话框点击确定按钮，添加或修改数据
  const handleOk = async formValues => {
    console.log('保存：',formValues)
    if (modalType === 'create'){

      const res = await add(formValues)
      // 添加成功后，将添加的数据保存到数据源数组中
      setHealthList([
        res,
        ...healthList
      ])
      message.success('健康数据添加成功！！！')
    } 
    else {

      await update(formValues)
      // 修改成功后，将修改的数据更新到数据源数组中
      // 根据 id  在数据源中 匹配数据，更新
      setHealthList(healthList.map(item => {
        if (item.id === formValues.id){
          return {
            ...item,
            ...formValues
          }
        }
        return item
      }))
      message.success('修改成功！！')
    }
    setModalVisible(false)
  }

  // 将健康数据导出成 excel 文件
  const handleExport = async () => {
    // 查询出所有需要导出的数据
    const result = await getAll()
    // 表头, 把对象的属性值拿出来，形成一个数组
    const title = Object.keys(result.list[0])
    // 构建需要导出的数据结构
    const data = [
      title
    ]

    // 添加各行数据到 data 
    result.list.forEach(item => {
      // 将对象的各个属性值取出
      data.push(Object.values(item))
    })

    // 工作表，将需要导出的数据放入工作表中
    const ws = XLSX.utils.aoa_to_sheet(data);
    // 工作簿
    const wb = XLSX.utils.book_new();
    // 将工作表追加到工作簿中
		XLSX.utils.book_append_sheet(wb, ws, "健康数据");
		// 将工作簿内容写入文件
		XLSX.writeFile(wb, "student_health.xlsx")
    
  }

  return (
    <div>
        <Space style={{marginBottom:15,marginRight:5}}>
          <Button 
            type="primary"
            onClick={() => {
              setModalVisible(true)
              setModalType('create')
            }}
          >
            添加
            </Button>
          <Button onClick={handleExport}>导出全部健康数据</Button>
        </Space>

        <Space style={{marginBottom:15}}>
        <Form name="horizontal_login" layout="inline">
            <Form.Item name="name">
              <Input placeholder="请输入搜索姓名" />
            </Form.Item>
            <Form.Item name="stuNo">
              <Input placeholder="请输入学号"/>
            </Form.Item>
            <Form.Item name="type">
              <Input placeholder="请输入测量方式"/>
            </Form.Item>
            <Form.Item>
              <DatePicker.RangePicker
                showTime={{ format: 'HH:mm' }}
                format="YYYY-MM-DD HH:mm"
              />
            </Form.Item>
            <Form.Item>
              <Button type="primary">搜索</Button>
            </Form.Item>
          </Form>
        </Space>

        
        <CustomTable 
          dataSource= {healthList}
          pageSize= {pageSize}
          total= {total}
          page={page}
          onChange ={handlePageChange}
          onUpdateClick={data => {
            setModalVisible(true)
            setModalType('update')
            // data 是需要修改的数据项
            setUpdateData(data)
            // console.log('data:',data)
          }}
          onDeleteClick={async id => {
            console.log('删除的id：',id)
            await remove(id)
            setHealthList(healthList.filter(item => item.id !== id))
          }}
        />

        <CustomModal 
          visible={modalVisible}
          modalType={modalType}
          onCancel = {() => setModalVisible(false)}
          updateData={updateData}
          onCreate={handleOk}
        />
      </div>
  )
}

// ----------------------------------------------------------
// 用 class 组件 完成 ajax请求

// import { Button, Space } from 'antd'
// import React, { Component } from 'react'
// import { getList } from '../../api/health'
// import CustomTable from './components/CustomTable'

// export default class Health extends Component {

//   state= {
//     healthList:[],
//     page:1,
//     pageSize:5,
//     total:0
//   }

//   // 组件挂载后立即调用，发送 ajax 请求
//   componentDidMount(){
//     getList({
//       pageSize: this.state.pageSize
//     })
//       .then(res => {
//         this.setState({
//           healthList: res.list,
//           page: res.page,
//           pageSize: res.pageSize,
//           total: res.total
//         })
//       })
//   }

//   render() {
//     return (
//       <div>
//         <Space style={{marginBottom:15}}>
//           <Button type="primary">添加</Button>
//           <Button>导出</Button>
//         </Space>
//         <CustomTable 
//           dataSource= {this.state.healthList}
//           pageSize= {this.state.pageSize}
//           total= {this.state.total}
//         />
//       </div>
//     )
//   }
// }

